<template>
  <el-container>
    <el-header>
      <div class="bbb">
        <!-- <img src="../plugins/123456.jpeg" /> -->
        <img src="../assets/logo.png" alt="">
        <h2>电商后台管理系统</h2>
      </div>
      <el-button type="info" @click="login_out">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse?'65px':'200px'" >
        <div @click="isCollapse=!isCollapse" class="ddd">|||</div>
        <el-menu
          default-active="2"
          :collapse="isCollapse"
          background-color="#35424e"
          text-color="#fff"
          unique-opened
          :collapse-transition="false"
          active-text-color="#ffd04b"
        >
          <el-submenu :index="item.id+''"  v-for="(item,index) in list"
          :key="index">
            <template slot="title">
              <i :class="iconObj[item.id]"></i>
              <span slot="title">{{item.authName}}</span>
            </template>
            <!-- 1-1 -->
            <el-menu-item
              :index="it.id+''"     
              v-for="(it,ind) in item.children"
              :key="ind"
              @click="toch(it.path)"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">{{it.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- -0- -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "VueShopsHome",
  data() {
    return {
      isCollapse: false,
      list: [],
      iconObj: {
        125: "iconfont icon-users",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
      },
    };
  },
  mounted() {},
  created() {
    this.getlist();
  },
  methods: {
    login_out() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //清除token
          sessionStorage.token = "";
          //跳转到login
          this.$router.push("/login");
          this.$message.success("退出成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    // 列表
    async getlist() {
      const lists = await this.axios.get("/menus");
      console.log(lists);
      this.list = lists.data.data;
      console.log(this.list);
    },
    // 跳转判断
    toch(active) {
      console.log(this.$route);
      console.log(active);
      if (this.$route.name == active) {
        return false;
      } else {
        this.$router.push("/" + active);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
}
.el-header {
  height: 67px;
  background-color: hsl(213, 9%, 24%);
  line-height: 67px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  .bbb {
    width: 50%;
    display: flex;
    h2 {
      line-height: 57px;
      color: white;
      margin-left: 2%;
    }
    img {
      width: 61px;
      height: 56px;
      margin-left: 5%;
      border-radius: 50%;
    }
  }
}
.el-aside {
  width: 100%;
  background-color: #35424e;
  color: #333;
  text-align: center;
  .ddd {
    width: 100%;
    height: 20px;
    background-color: #405262;
    color: #ffffff;
  }
  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #f2f6fa;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-menu-item{
  margin-left: 20px;
}
.el-submenu{
  padding-right: 15px;
} 
</style>